<template>
    <el-menu
      style="height: 100%; "
      default-active="2"
      mode="vertical"
      background-color="#304156"
      text-color="#fff"
      class="el-menu-vertical-demo"
      :collapse="this.mainMenuWidthLocal"
      @select="handleSelect">
      <el-tooltip :content="collapse" placement="bottom" effect="light">
      <el-button @click="handleSelectButton" :icon="icon" style="text-align: center;height: 55px;padding-left: 25px;background-color:#304156;border:0px;color:#fff"></el-button>
      </el-tooltip>  
      <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>登录日志</span>
          </template>
            <el-menu-item index="1-1">不分页</el-menu-item>
            <el-menu-item index="1-2">分页</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>学校管理</span>
          </template>
            <el-menu-item index="2-1">成绩查询</el-menu-item>
            <el-menu-item index="2-2">年级查询</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>职务和人员管理</span>
          </template>
            <el-menu-item index="3-1">（下拉）职务-人员列表</el-menu-item>
            <el-menu-item index="3-2">（表格）职务-人员</el-menu-item>
             <el-menu-item index="3-3">（新）职务-人员</el-menu-item>
        </el-submenu>
         <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>订单管理</span>
          </template>
            <el-menu-item index="4-1">订单</el-menu-item>
            <el-menu-item index="4-2" disabled>未定义</el-menu-item>
        </el-submenu>
      </el-menu>
</template>
<script>
export default {
    name: 'MainMenu',
     props: {
        mainMenuWidth: Boolean,
    },
    data () {
        return {
            msg: '',
            icon:"el-icon-s-unfold",
            mainMenuWidthLocal: this.mainMenuWidth,
            collapse: '展开',

        };
    },
    watch: {
        mainMenuWidthLocal: function (val) {
            if (val) {
              this.icon = "el-icon-s-unfold";
              this.collapse = "展开"
            } else {
              this.icon = "el-icon-s-fold";
              this.collapse = "折叠"
            }
        }
    },
    mounted: function () {
        
    },
    methods: {
      handleSelectButton(){
          this.mainMenuWidthLocal = !this.mainMenuWidthLocal;
      },
handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if (key === "1-1") {
            this.$router.push({
              path: "/main/testExam",
              query: {
                name: this.$route.query.name,
              }
            });
        }
        else if (key === "1-2" ) {
            this.$router.push({
              path: "/main/testExamFenYe",
              query: {
                name: this.$route.query.name,
              }
            });
        } else if (key === "2-1" ) {
            this.$router.push({
              path: "/main/sysStudent",
            });
        } else if (key === "2-2" ) {
            this.$router.push({
              path: "/main/grade",
            });
        } else if (key === "3-1" ) {
            this.$router.push({
              path: "/main/position",
            });
        } else if (key === "3-2" ) {
            this.$router.push({
              path: "/main/positionAndEmployee",
            });
        } else if (key === "3-3" ) {
            this.$router.push({
              path: "/main/sysRole",
            });
        } else if (key === "4-1" ) {
            this.$router.push({
              path: "/main/bills",
            });
        } 
      },
    }
};
</script>
<style scoped>
    
</style>